import { Callout, Tabs } from 'nextra/components'

# Quick Start

Umo-Editor is a document editor based on Vue3.
You can visit [https://umodoc.com/en/demo](https://umodoc.com/en/demo) to experience and test some features of Umo-Editor.

## Installation

### Install with NPM

```sh npm2yarn
npm install --save @umoteam/editor
```

<Callout type="warning" emoji="⚠️">
**Note**: Starting from version v3.0, Umo Editor no longer supports the UMD version.
</Callout>

## Usage

Choose any of the following methods:

### Global Installation
```js filename="main.js"
import { createApp } from 'vue';
import { useUmoEditor } from '@umoteam/editor';

const app = createApp(App);
app.use(useUmoEditor, {
  // Configuration options
  // ...
});
app.mount('#app');
```

### Direct Inclusion

Choose either of the following examples using Composition API or Options API in JS.

```vue filename="component.vue"
<template>
  <umo-editor v-bind="options" />
  <!-- Or -->
  <!-- 
  <umo-editor 
    :editor-key="options.editorKey" 
    ... 
  /> -->
</template>

// Using Composition API
<script setup>
  import { ref } from 'vue'
  import { UmoEditor } from '@umoteam/editor';

  const options = ref({
    // Configuration options
    // ...
  });
</script>

// Or using Options API
<script>
  import { UmoEditor } from '@umoteam/editor';

  export default {
    components: {
      UmoEditor
    },
    data() {
      return {
        options: {
          // Configuration options
          // ...
        }
      }
    }
  }
</script>
```

### Usage in Nuxt3
<Tabs items={["Method 1: Using umo-editor-nuxt module", "Method 2: Direct Import"]}>
<Tabs.Tab>

#### Installation

```bash
npx nuxi module add @umoteam/umo-editor-nuxt
# Or
npm i @umoteam/umo-editor-nuxt
```

#### Usage

1. Install and configure the `umo-editor-nuxt` module

```ts filename="nuxt.config.ts"
export default defineNuxtConfig({
  modules: ['@umoteam/umo-editor-nuxt'],
  umoEditor: {
    // Global configuration options. Default config:
    // https://editor.umodoc.com/cn/docs/options/default
    locale: 'en-US',
  },
})
```

2. Use the Umo Editor component

```vue
<template>
  <div style="height: 600px;">
    <umo-editor v-bind="options" />
  </div>
</template>

<script setup>
const options = ref({
    // Configuration options:
    // https://editor.umodoc.com/cn/docs/options/default
})
</script>
```
</Tabs.Tab>
<Tabs.Tab>
Umo Editor does not currently support SSR. In Nuxt3 SSR mode, you can use the `<client-only>` component or other methods to ensure Umo Editor is rendered and used on the client side.

```vue {2,4} filename="component.vue"
<template>
  <client-only>
    <umo-editor v-bind="options" />
  </client-only>
</template>

<script setup>
  import { UmoEditor } from '@umoteam/editor';

  const options = ref({
    // Configuration options
    // ...
  });
</script>
```

For more usage methods, see [Usage](#usage).
</Tabs.Tab>
</Tabs>

## Configuration

See the [Default Configuration](./options/default).